<template>
  <el-card class="box-card">
    <!-- 卡片头部的父元素可以用flex布局, 水平两端对齐, 垂直居中对其-->
    <div slot="header" style="display: flex; justify-content: space-between;align-items: center">
      <!-- 左边放标题 -->
      <span>业务员列表</span>
      <!-- 左边放按钮 -->
      <el-button @click="$router.push('/salesman/save')" type="primary">添加业务员</el-button>
    </div>
    <!-- 头部下面放卡片主体 -->
    <div>
      <!-- 搜索的表单 :inline="true"表示表单水平排列 -->
      <el-form :inline="true" :model="param" style="min-width: 1000px">
        <el-form-item>
          <el-input v-model="param.saleName" placeholder="输入业务员名字"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="param.contact" placeholder="输入业务员手机号">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="param.lowSal" placeholder="最低工资"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="param.highSal" placeholder="最高工资"/>
        </el-form-item>
        <!-- 搜索按钮也是调用getCarList方法 -->
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form>
      <el-table :data="tableData" stripe border max-height="600" style="width: 100%">
        <el-table-column prop="id" label="业务员编号" min-width="150"></el-table-column>
        <el-table-column prop="saleName" label="业务员名字" min-width="150"></el-table-column>
        <el-table-column prop="password" label="密码" min-width="150"></el-table-column>
        <el-table-column prop="sex" label="业务员性别" min-width="150"></el-table-column>
        <el-table-column prop="contact" label="业务员电话" min-width="150"></el-table-column>
        <el-table-column prop="sal" label="业务员工资" min-width="150"></el-table-column>
        <el-table-column label="操作" min-width="300px">
          <!-- 用template来自定义这一列的内容 v-slot="scope"可以用scope.row拿到这一行数据对象, scope.$index拿到这一行的索引 -->
          <template v-slot="scope">
            <el-button size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格下面放一个分页器组件 -->
      <el-pagination
          style="margin-top: 20px"
          background
          layout="sizes,prev, pager, next, jumper, total"
          :page-size="param.size"
          :current-page="param.current"
          :page-sizes="sizes"
          :total="total"
          :page-count="pages"
          @current-change="currentChange"
          @size-change="sizeChange">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "SalesmanView",
  data() {
    return {
      // 查询条件对象param (跟随http请求发给后端)
      param : {
        saleName: null,
        contact: null,
        lowSal: null,
        highSal: null,
        current: 1,
        size: 10
      },
      // 绑定给表格的数组 (http响应的数据data(就是后端的分页器对象)中取出records赋给它)
      tableData: [],
      // 查询到的总行数 (http响应的数据data(就是后端的分页器对象)中取出total赋给它)
      total:0,
      // 查询到的总行数 (http响应的数据data(就是后端的分页器对象)中取出pages赋给它)
      pages:0,
      // 绑定给分页器组件的数组, 控制每页多少行的下拉框选项
      sizes:[5, 10, 20, 50, 100],
    }
  },
  methods: {
    getTableData() {
      this.$http.get('/salesman/query', {
        params: this.param
      }).then((data) => {
        this.tableData = data.records
        this.total = data.total
        this.pages = data.pages
      })
    },
    // 当页码current改变时的回调行数
    currentChange(val){
      this.param.current = val
      this.getTableData()
    },
    // 当size改变时的回调行数
    sizeChange(val){
      this.param.size = val
      this.getTableData()
    },
    resetForm() {
      this.param.saleName = null
      this.param.contact = null
      this.param.lowSal = null
      this.param.highSal = null
    }
  },
  created() {
    this.getTableData();
  }
}
</script>

<style scoped>

</style>